<template>
  <div>
    <el-form
      :model="value"
      :rules="rules"
      ref="productInfoForm"
      label-width="120px"
      style="width: 600px"
      size="small"
    >
    <!-- style="position:relative;left:-50px;" -->
      <el-form-item  label="商品名称:" prop="name">
        <el-input placeholder="请输入商品名称" v-model="value.name" style="width:200px"></el-input>
      </el-form-item>

      <el-form-item
        label="助记码:"
        style="width:200px;position: relative;left:290px;top:-50px"
        name="productHelpCode"
        prop="name"
      >
        <el-input v-model="value.name" style="width:200px"></el-input>
      </el-form-item>

      <el-form-item label="商品规格:" style="position: relative;top:-50px;">
        <el-input v-model="value.shopSize" style="width:200px"></el-input>
      </el-form-item>

      <el-form-item
        style="position: relative;top:-100px;left:290px;"
        label="商品分类:"
        prop="productCategoryId"
      >
        <el-cascader
          change-on-select
          v-model="selectProductCateValue"
          :options="productCateOptions"
        ></el-cascader>
      </el-form-item>

      <el-form-item label="商品类型:" style="position: relative;top:-100px;">
        <el-select @change="attrChange" v-model="value.shopProductAttributeid" placeholder="请选择">
          <el-option
            v-for="item in shopProductAttributes"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="使用状态:" style="position: relative;top:-150px;left:290px;">
        <!-- @change="attrChange" -->
        <el-select v-model="value.userMode" placeholder="请选择">
          <el-option v-for="item in userModies" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="计量单位:" style="position: relative;top:-150px;">
        <el-select v-model="value.unit" placeholder="请选择计量单位">
          <el-option v-for="item in unitOptions" :key="item.id" :label="item.id" :value="item.id"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="供货商:" style="position: relative;top:-200px;left:290px;">
        <el-select v-model="value.unit" placeholder="请选择供货单位">
          <el-option v-for="item in Supply" :key="item.id" :label="item.id" :value="item.id"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="国际码:" style="position: relative;top:-200px">
        <el-input v-model="value.productSn" style="width:200px"></el-input>
      </el-form-item>

      <el-form-item label="自编码:" style="position: relative;top:-250px;left:290px">
        <el-input v-model="value.shopProductCode" style="width:200px;"></el-input>
      </el-form-item>

      <!-- 
      <el-form-item label="商品图片：" prop="pic">
        <single-upload
          v-model="value.pic"
          style="width: 300px;display: inline-block;margin-left: 10px"
        ></single-upload>
      </el-form-item>-->

      <el-form-item style="position: relative;top:-250px;" label="商品进价:">
        <el-input-number v-model="value.price" :precision="2" :min="0" :max="999999"></el-input-number>
      </el-form-item>
      <el-form-item label="商品售价:" style="position: relative;top:-300px;left:290px">
        <el-input-number :precision="2" v-model="value.originalPrice" :min="0" :max="999999"></el-input-number>
      </el-form-item>
      <!-- 
         <el-form-item label="促销价">
         <el-input-number v-enter-number :precision="2" v-model="value.promotionPrice" ></el-input-number>
      </el-form-item>
      -->

      <el-form-item label="折扣:" style="position: relative;top:-300px;">
        <el-input-number v-enter-number :precision="2" :min="0" v-model="value.shopProductDiscount"></el-input-number>
      </el-form-item>

      <el-form-item label="商品库存:" style="position: relative;top:-350px;left:290px;">
        <el-input-number :precision="2" :min="0" v-enter-number v-model="value.stock"></el-input-number>
      </el-form-item>

      <el-form-item label="库存预警:" style="position: relative;top:-350px;">
        <el-input-number :precision="2" :min="0" v-enter-number v-model="value.lowStock"></el-input-number>
      </el-form-item>

      <!-- <el-form-item label="编码：">
        <el-input v-model="value.shopProductCode"></el-input>
      </el-form-item>-->
      <el-form-item label="标签:" style="position: relative;top:-400px;left:290px;">
        <el-input style="width:200px" v-model="value.shopProductLabel"></el-input>
      </el-form-item>

      <el-form-item label="保质期:" style="position: relative;top:-400px;">
        <el-input-number :precision="2" :min="0" v-enter-number v-model="value.shopShelfLife"></el-input-number>/月
      </el-form-item>
      <el-form-item label="保质期预警:" style="position: relative;top:-450px;left:290px;">
        <el-input-number :precision="2" :min="0" v-enter-number v-model="value.shopLowShelflife"></el-input-number>/月
      </el-form-item>

      <el-form-item name="booleanJiFen" label="是否积分" style="position: relative;top:-450px;">
        <el-radio-group v-model="form.resource">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="是否允许负库存销售" style="position: relative;top:-500px;left:290px;">
        <el-radio-group v-model="form.negative">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- 规格1 -->

      <el-form-item label="规格1:" style="position: relative;top:-500px;">
        <el-input
          placeholder="1"
          :precision="2"
          :min="0"
          v-enter-number
          v-model="value.shopShelfLifelist"
          style="width:70px"
        ></el-input>

        <el-select style="width:70px;" v-model="value.unit" placeholder="单位">
          <el-option v-for="item in unitOptions" :key="item.id" :label="item.id" :value="item.id"></el-option>
        </el-select>

      </el-form-item>
      <!-- 单位 -->
      <!-- <el-select style="width:70px;" v-model="value.unit" placeholder="单位">
        <el-option v-for="item in unitOptions" :key="item.id" :label="item.id" :value="item.id"></el-option>
      </el-select> -->
      <!-- 单位 -->
        
        <el-select size="medium" style="position: relative;top:-555px;left:270px;width:70px;height:22px!important;" v-model="value.unit" placeholder="单位">
          <el-option v-for="item in unitOptions" :key="item.id" :label="item.id" :value="item.id"></el-option>
        </el-select>
      

      <el-form-item label="零售价:" style="position: relative;top:-575px;left:300px;">
        <el-input
          :precision="2"
          :min="0"
          v-enter-number
          v-model="value.shopShelfLiferetarl"
          style="width:70px"
        ></el-input>
      </el-form-item>

      <el-form-item label="批发价:" style="position: relative;top:-625px;left:440px;">
        <el-input
          :precision="2"
          :min="0"
          v-enter-number
          v-model="value.shopShelfLifeinside"
          style="width:70px"
        ></el-input>
      </el-form-item>

      <!-- 规格1 -->

      <el-form-item label="规格2:" style="position: relative;top:-600px;">
        <el-input
          placeholder="1"
          :precision="2"
          :min="0"
          v-enter-number
          v-model="value.shopShelfLifebox"
          style="width:70px"
        ></el-input>箱=
        <el-input
          placeholder="20"
          :precision="2"
          :min="0"
          v-enter-number
          v-model="value.shopShelfLifecup"
          style="width:70px"
        ></el-input>板
      </el-form-item>

      <el-form-item label="零售价:" style="position: relative;top:-650px;left:290px;">
        <el-input
          :precision="2"
          :min="0"
          v-enter-number
          v-model="value.shopShelfLifeprice"
          style="width:70px"
        ></el-input>
      </el-form-item>

      <el-form-item label="批发价:" style="position: relative;top:-700px;left:440px;">
        <el-input
          :precision="2"
          :min="0"
          v-enter-number
          v-model="value.shopShelfLifetride"
          style="width:70px"
        ></el-input>
      </el-form-item>

      <!-- 规格 -->

      <el-form-item label="备注:" style="position: relative;top:-700px;">
        <el-input placeholder="请输入备注信息" v-model="value.shopRemark"></el-input>
      </el-form-item>

      <el-form-item style="text-align: center; position: relative;top:-700px;">
        <el-button type="primary" size="medium" @click="handleFinishCommit">完成，提交商品</el-button>
        <!--
           <el-button type="primary" size="medium" @click="handleNext('productInfoForm')">下一步，填写商品促销</el-button>
        -->
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { fetchListWithChildren } from "@/api/productCate";
import { fetchAreaListWithChildren, getArea } from "@/api/area";
import SingleUpload from "@/components/Upload/singleUpload";
import { fetchList as fetchBrandList } from "@/api/brand";
import { fetchList as fetchFeightTemplateList } from "@/api/pms/feightTemplate";
import { fetchAllList as fetchAttrList } from "@/api/productAttrCate";
import { getProduct } from "@/api/product";

export default {
  name: "ProductInfoDetail",
  components: { SingleUpload },
  props: {
    value: Object,
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // single:false,
      // value:[],
      shopProductAttributes: [],
      hasEditCreated: false,
      //选中商品分类的值
      selectProductCateValue: [],
      productCateOptions: [],
      //选中商品分类的值
      selectAreaValue: [],
      areaOptions: [],
      brandOptions: [],
      feightTemplateOptions: [],

      // 使用状态
      userModies: [],
      // 供货单位
      Supply: [
        {
          id: "",
          name: ""
        }
      ],
      unitOptions: [
        {
          id: "个",
          name: "个"
        },
        {
          id: "箱",
          name: "箱"
        },
        {
          id: "条",
          name: "条"
        },

        {
          id: "盒",
          name: "盒"
        },
        {
          id: "包",
          name: "包"
        },
        {
          id: "斤",
          name: "斤"
        },
        {
          id: "两",
          name: "两"
        },
        {
          id: "件",
          name: "件"
        },
        {
          id: "瓶",
          name: "瓶"
        },
        {
          id: "千克",
          name: "千克"
        }
      ],
      form: {
        resource: ""
      },
      rules: {
        name: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
          {
            min: 2,
            max: 140,
            message: "长度在 2 到 140 个字符",
            trigger: "blur"
          }
        ],
        subTitle: [
          { required: true, message: "请输入商品副标题", trigger: "blur" }
        ],
        productCategoryId: [
          { required: true, message: "请选择商品分类", trigger: "blur" }
        ],

        brandId: [
          { required: true, message: "请选择商品品牌", trigger: "blur" }
        ],
        description: [
          { required: true, message: "请输入商品介绍", trigger: "blur" }
        ],
        requiredProp: [
          { required: true, message: "该项为必填项", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.getProductCateList();
    this.getAreaList();
    this.getBrandList();
    this.getFeightTemplateList();
    this.getProductAttributesList();
  },
  computed: {
    //商品的编号
    productId() {
      return this.value.id;
    }
  },
  watch: {
    productId: function(newValue) {
      if (!this.isEdit) return;
      if (this.hasEditCreated) return;
      console.log(newValue);
      if (newValue === undefined || newValue == null || newValue === 0) return;
      this.handleEditCreated();
    },
    selectProductCateValue: function(newValue) {
      console.log(newValue);
      if (newValue != null) {
        this.value.productCategoryId =
          newValue[newValue.length - 1 > 0 ? newValue.length - 1 : 0];
        this.value.productCategoryName = this.getCateNameById(
          this.value.productCategoryId
        );
      } else {
        this.value.productCategoryId = null;
        this.value.productCategoryName = null;
      }
    },
    selectAreaValue: function(newValue) {
      console.log(newValue);
      if (newValue != null) {
        this.value.areaId =
          newValue[newValue.length - 1 > 0 ? newValue.length - 1 : 0];
        this.value.areaName = this.getAreaById(this.value.areaId);
      } else {
        this.value.areaId = null;
        this.value.areaName = null;
      }
    }
    /*  selectAreaValue: [],
      areaOptions: [],*/
  },
  methods: {
    // single(){
    //   this.single = true
    // },
    getProductAttributesList() {
      let _this = this;
      fetchAttrList().then(response => {
        _this.shopProductAttributes = [];
        let attrs = response.data;
        for (let i = 0; i < attrs.length; i++) {
          _this.shopProductAttributes.push({
            id: attrs[i].id,
            name: attrs[i].name
          });
        }
      });
    },
    attrChange(v) {
      for (let item of this.shopProductAttributes) {
        if (v == item.id) {
          this.value.shopProductAttributeName = item.name;
          break;
        }
      }
    },
    //处理编辑逻辑
    handleEditCreated() {
      if (this.value.productCategoryId != null) {
        this.selectProductCateValue.push(this.value.cateParentId);
        this.selectProductCateValue.push(this.value.productCategoryId);
      }
      if (this.value.areaId != null) {
        console.log(this.value.areaId);
        this.selectAreaValue.push(this.value.areaId);
        getArea(this.value.areaId).then(response => {
          this.selectAreaValue.push(response.data.pid);
        });
      }
      this.hasEditCreated = true;
    },
    handleFinishCommit() {
      this.$emit("finishCommit", this.isEdit);
    },
    getAreaList() {
      fetchAreaListWithChildren().then(response => {
        let list = response.data;
        this.areaOptions = [];
        for (let i = 0; i < list.length; i++) {
          let children = [];
          if (list[i].children != null && list[i].children.length > 0) {
            for (let j = 0; j < list[i].children.length; j++) {
              children.push({
                label: list[i].children[j].name,
                value: list[i].children[j].id
              });
            }
          }
          this.areaOptions.push({
            label: list[i].name,
            value: list[i].id,
            children: children
          });
        }
      });
    },
    getProductCateList() {
      fetchListWithChildren().then(response => {
        let list = response.data;
        this.productCateOptions = [];
        for (let i = 0; i < list.length; i++) {
          let children = [];
          if (list[i].children != null && list[i].children.length > 0) {
            for (let j = 0; j < list[i].children.length; j++) {
              children.push({
                label: list[i].children[j].name,
                value: list[i].children[j].id
              });
            }
          }
          this.productCateOptions.push({
            label: list[i].name,
            value: list[i].id,
            children: children
          });
        }
      });
    },
    getFeightTemplateList() {
      fetchFeightTemplateList({ pageNum: 1, pageSize: 100 }).then(response => {
        this.feightTemplateOptions = [];
        let feightTemplateList = response.data.records;
        for (let i = 0; i < feightTemplateList.length; i++) {
          this.feightTemplateOptions.push({
            label: feightTemplateList[i].name,
            value: feightTemplateList[i].id
          });
        }
      });
    },
    getBrandList() {
      fetchBrandList({ pageNum: 1, pageSize: 100 }).then(response => {
        this.brandOptions = [];
        let brandList = response.data.records;
        for (let i = 0; i < brandList.length; i++) {
          this.brandOptions.push({
            label: brandList[i].name,
            value: brandList[i].id
          });
        }
      });
    },
    getAreaById(id) {
      let name = null;
      console.log(JSON.stringify(this.areaOptions));
      for (let i = 0; i < this.areaOptions.length; i++) {
        for (let j = 0; j < this.areaOptions[i].children.length; j++) {
          if (
            this.areaOptions[i].children[j].value != undefined &&
            this.areaOptions[i].children[j].value === id
          ) {
            name = this.areaOptions[i].children[j].label;
            return name;
          }
        }
      }
      return name;
    },
    getCateNameById(id) {
      let name = null;
      // console.log(JSON.stringify(this.productCateOptions))
      for (let i = 0; i < this.productCateOptions.length; i++) {
        for (let j = 0; j < this.productCateOptions[i].children.length; j++) {
          if (
            this.productCateOptions[i].children[j].value != undefined &&
            this.productCateOptions[i].children[j].value === id
          ) {
            name = this.productCateOptions[i].children[j].label;
            return name;
          }
        }
      }
      return name;
    },
    handleNext(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$emit("nextStep");
        } else {
          this.$message({
            message: "验证失败",
            type: "error",
            duration: 1000
          });
          return false;
        }
      });
    },
    handleBrandChange(val) {
      let brandName = "";
      for (let i = 0; i < this.brandOptions.length; i++) {
        if (this.brandOptions[i].value === val) {
          brandName = this.brandOptions[i].label;
          break;
        }
      }
      this.value.brandName = brandName;
    }
  }
};
</script>

<style scoped>
</style>
